<template>
    <body id="poster">
      <Header />
      <div class="login-page">
        <div class="loginbox">
          <div class="jarallax-bg" > 
          </div>
        </div>
        <div class="main-section" style="margin-top: 50px;">
          <div class="row justify-content-center" >
            <div class="lady-image-section">
              <img :src="imgLogin" alt="Lady" class="lady-image">
            </div>
            <div class="login-section">
              <el-form  label-position="left" label-width="0px" class="login-container">
                <h3 class="login_title">LOGIN</h3>
                <el-form-item >
                  <el-input type="text" v-model="uname" autocomplete="off" placeholder="账号/email"></el-input>
                </el-form-item>
                <el-form-item >
                  <el-input type="password" v-model="password" autocomplete="off" placeholder="密码"  show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%; background: #6bb252; border: none;--bs-btn-padding-x: 0.75rem;" @click="logininfo()">登录</el-button>
                </el-form-item>
                <div class="d-flex justify-content-between">
                  <el-checkbox v-model="checked" label="记住密码"></el-checkbox>
                  <router-link to="/register" class="register-link">注册账号</router-link>
                </div>
              </el-form>
            </div>
          </div>
        </div>
        
          <Footer />
      </div>
    </body>
  </template>
  
  <script>
  import Header from "../pages/header.vue";
  import Footer from "../pages/demo.vue";
  import { login } from "@/api/api";

  export default {
    components: { Header,Footer },
    data() {
      return {
          uname:'',
          password:'',
          imgLogin: '../images/img-login.jpg',
          checked: false, 
      };
    },
    methods: {
      logininfo() {
        if(this.uname!=''||this.password!=''){
          login(this.uname,this.password).then(res=>{
            console.log(res);
           if(res.data>0){
             this.$router.push('/')
           }else{
             this.$message.error("账号或密码错误")
           }
          })
        }
      }
    }
  }
  </script>
  
  <style scoped>
  #poster {
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: relative;
  }
  
  *{
    box-sizing: border-box;
  }
  
  body {
    margin: 0px;
    padding: 0px;
    letter-spacing: 0.03em;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  .vegetables-image {
    width: 100%;
    max-height: 200px;
  }
  .login-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
  }
  
  .loginbox{
    width: 100%;
    height: 300px;
    background-color: #f4d16e;
    background-image:url(../../public/images/banner-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
  }
  
  .jarallax-bg{
    width: 1600px;
    height: 300px;
  }
  
  .py-5 {
    padding-bottom: 3rem;
  }
  
  .py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .py-md-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
    @media (max-width: 768px) {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  
  .main-section {
    --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      width: 100%;
      padding-right: calc(var(--bs-gutter-x)* .5);
      padding-left: calc(var(--bs-gutter-x)* .5);
      margin-right: auto;
      margin-left: auto;
  }
  
  .justify-content-center {
      justify-content: center !important;
  }
  
  .row{
    display: flex;
    --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      flex-wrap: wrap;
      margin-top: calc(-1* var(--bs-gutter-y));
      margin-right: calc(-.5* var(--bs-gutter-x));
      margin-left: calc(-.5* var(--bs-gutter-x));
  }
  
  
  .lady-image {
    max-width: 100%;
    margin: 74px auto;
    height: 460px;
  }
  
  .login-container {
    border-radius: 1px;
    background-clip: padding-box;
    margin: 74px auto;
    width: 650px;
    height: 460px;
    padding: 3rem !important;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  }

  .register-link {
  text-decoration: none; /* 取消下滑线 */
  color: inherit; /* 继承父元素的颜色，或设置默认颜色 */
  transition: color 0.3s; /* 添加过渡效果 */
  margin-left:  auto;
  }

  .register-link:hover {
    color: #007bff; /* 设置鼠标悬停时的颜色 */
  }

  .footer {
    width: 95%;
    margin-top: 3rem;
  }
  @media(min-width: 1400px) {
    .container-lg {
        max-width: 1600px;
    }
}
@media(min-width: 1400px) {
    .container{
        max-width: 1320px;
    }
}
  .container,.container-lg{
    --bs-gutter-x: 3rem;
  }
  .rounded-5 {
    border-radius: 2rem !important;
  }
  .bg-warning{
    --bs-bg-opacity: 1;
    background-color: rgba(255,193,7, var(--bs-bg-opacity)) !important;
  }
  .pt-5 {
    padding-top: 3rem !important;
  }
  .justify-content-center{
    justify-content: center !important;
  }
  .align-items-center{
    align-items: center !important;
  }
  @media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
.mt-5 {
    margin-top: 3rem !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--bs-dark);
    font-weight: 700;
}
@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 2rem;
    }
}
  .gap-2 {
    gap: .5rem !important;
  }
  .mb-5 {
    margin-bottom: 3rem !important;
  }
  .flex-wrap {
    flex-wrap: wrap !important;
  }
  .d-flex {
    display: flex !important;
  }
  </style>